<template>
	<view class="ns-goods-item-box" :class="{'no-padding': routeIdent}">
		<view class="ns-goods-item" v-for="(item, index) in value" :key="index" @click="toDetail(item)">
			<view class="image-box" :class="{ 'recommend-way': item.recommend_way }" >
				
				<!-- <image v-if="recommend_way != 0" :src="$util.img('/upload/uniapp/recommend.png', { size: 'mid' })" mode="aspectFill"></image> -->
				<view v-if="item.recommend_way" :class="{ 'recommend-icon': item.recommend_way != 0, 'recommend-way-one': item.recommend_way == 1, 'recommend-way-two': item.recommend_way == 2, 'recommend-way-three': item.recommend_way == 3 }">
					<text class="recommend-icon-font">{{ item.recommend_way == 1 ? '新品' : item.recommend_way == 2 ? '精品' : item.recommend_way == 3 ? '推荐' : '' }}</text>
				</view>
				<template v-if="item.goods_image">
					<image :src="$util.img(item.goods_image, { size: 'mid' })" mode="aspectFill" @error="imageError(index)"></image>
				</template>
				<template v-else>
					<image :src="$util.img(item.sku_image, { size: 'mid' })" mode="aspectFill" @error="imageError(index)"></image>
				</template>
			</view>

			<!-- 商品名称 -->
			<block v-if="showInfor.isShowGoodName">
				<view :class="showInfor.isShowGoodSubTitle ? 'good-name1' : 'good-name'" v-if="item.goods_name">
					<text :class="showInfor.isShowGoodSubTitle ? 'name-hidden-two' : 'name-hidden-one'">{{ item['goods_name'] }}</text>
				</view>
				<view :class="showInfor.isShowGoodSubTitle ? 'good-name1' : 'good-name'" v-else>
					<text :class="showInfor.isShowGoodSubTitle ? 'name-hidden-two' : 'name-hidden-one'">{{ item['sku_name'] }}</text>
				</view>
			</block>

			<!-- 副标题 -->
			<view class="goods-sub-name" v-if="showInfor.isShowGoodSubTitle">
				<text v-if="item.introduction != ''">{{ item.introduction }}</text>
			</view>

			<view class="mail ns-text-color ns-border-color" v-if="item.is_free_shipping || (addonIsExit.discount && item.promotion_type == 1)">
				<view v-if="item.is_free_shipping" class="ns-gradient-diy-goods-list ns-text-color" :data-theme="themeStyle">免运费</view>
				<view v-if="addonIsExit.discount && item.promotion_type == 1" class="ns-gradient-diy-goods-list ns-text-color" :data-theme="themeStyle">限时折扣</view>
			</view>

			<view class="price-info" v-if="type == 'default'">
				<block v-if="item.promotion_type == 1">
					<block v-if="item.member_price > 0">
						<view class="price-top">
							<view class="top-left ns-margin-right">
								<text class="unit">￥</text>
								<text class="price">{{ item.discount_price }}</text>
								<image :src="$util.img('upload/uniapp/index/discount.png')"></image>
							</view>
							<text class="sale_num" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{ item.member_price }}</text>
								<image :src="$util.img('upload/uniapp/index/VIP.png')"></image>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color" v-if="showInfor.isShowCart == 1" @click.stop="getGoodsSkuDetail(item.sku_id)"></text>
							<text class="sale_num" v-else-if="showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
					</block>
					<block v-else>
						<view class="price-top">
							<text class="ns-margin-right">
								<text class="unit">￥</text>
								<text class="price">{{ item.price }}</text>
							</text>
							<text class="sale_num" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{ item.discount_price }}</text>
								<image :src="$util.img('upload/uniapp/index/discount.png')"></image>
							</view>

							<text class="add iconfont iconadd-fill ns-text-color" v-if="showInfor.isShowCart == 1" @click.stop="getGoodsSkuDetail(item.sku_id)"></text>
							<text v-else-if="showInfor.isShowGoodSaleNum" class="sale_num">{{ item.sale_num }}人付款</text>
						</view>
					</block>
				</block>
				<block v-else>
					<block v-if="item.member_price > 0">
						<view class="price-top">
							<text class="ns-margin-right">
								<text class="unit">￥</text>
								<text class="price">{{ item.price }}</text>
							</text>
							<text class="sale_num" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{ item.member_price }}</text>
								<image :src="$util.img('upload/uniapp/index/VIP.png')"></image>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color" v-if="showInfor.isShowCart == 1" @click.stop="getGoodsSkuDetail(item.sku_id)"></text>
							<text class="sale_num" v-else-if="showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
					</block>
					<block v-else>
						<view class="price-top" v-if="(item.market_price > 0 && showInfor.isShowMarketPrice) || (showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum)">
							<text class="line-through ns-margin-right" v-if="item.market_price > 0 && showInfor.isShowMarketPrice">
								<text class="unit">￥</text>
								<text class="price">{{ item.market_price }}</text>
							</text>
							<text class="sale_num" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{ item.sale_num }}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{ item.price }}</text>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color" v-if="showInfor.isShowCart == 1" @click.stop="getGoodsSkuDetail(item.sku_id)"></text>
							<text v-else-if="showInfor.isShowGoodSaleNum" class="sale_num">{{ item.sale_num }}人付款</text>
						</view>
					</block>
				</block>
			</view>
			<view class="fenxiaoMarket-price" v-if="type == 'fenxiaoMarket'">
				<view class="price ns-text-color">{{ item.discount_price }}</view>
				<view class="earn-price ns-text-color ns-gradient-promotionpages-pintuan-payment" :data-theme="themeStyle">
					<text class="iconfont iconfenxiang1"></text>
					赚￥{{ item.commission_money }}
				</view>
			</view>
			
			<view class="topicList-price" v-if="type == 'topicsList'">
				<view class="item-through-price">{{ $lang('common.currencySymbol') }}{{ item.price }}</view>
				<view class="item-bottom">
					<view class="item-price ns-text-color">{{ $lang('common.currencySymbol') }}{{ item.topic_price }}</view>
					<view class="buy-btn ns-bg-color" @click="toDetail(item)">立即购买</view>
				</view>
			</view>
		</view>
		<ns-goods-sku-new ref="goodSkuNew" @refresh="refreshGoodsSkuDetail"></ns-goods-sku-new>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
import category from "@/components/diy-goods-level-category/diy-goods-level-category.js";
import globalConfig from '@/common/js/golbalConfig.js';
import htmlParser from '@/common/js/html-parser';
import nsGoodsSkuNew from '@/components/ns-goods-sku/ns-goods-sku-new.vue';

export default {
	components:{
		nsGoodsSkuNew
	},
	name: 'ns-goods-item-row',
	props: {
		value: {
			//循环商品列表
			type: Array
		},
		type: {
			//商品类型
			type: String,
			default: 'default'
		},
		showInfor: {
			//商品需要展示的字段
			type: Object,
			default() {
				return {
					isShowCart: false, //加入购物车按钮
					isShowGoodName: 1, //是否展示商品名称
					isShowGoodSaleNum: 1, //是否展示售卖数量
					isShowGoodSubTitle: 0, //是否展示副标题
					isShowMarketPrice: 1,
					recommend_way: 0
				};
			}
		},
	},
	mixins: [globalConfig],
	data() {
		return {
			skuId: 0,
			// 商品详情
			goodsSkuDetail: {
				goods_id: 0,
				goods_service: [],
			},
			routeIdent:false,
			join_cart: 'join_cart',
		};
	},
	created() {
		let pages = getCurrentPages();
		let route = pages[pages.length - 1].route;
		this.routeIdent = route == "pages/index/index/index" ? true : false
		
		for (var i = 0; i < this.value.length; i++) {
			if (this.value[i].goods_image) this.value[i].goods_image = this.value[i].goods_image.split(',')[0];
		}
		
		let currentPage = getCurrentPages()[getCurrentPages().length - 1];
		this.currentRoute = '/' + currentPage.route;
	},
	async onShow() {
		//登录后查询
		this.token = uni.getStorageSync('token');
	
		if (this.token != '' && this.preview == 0) {
			this.getCartCount();
			this.getMemberId();
		}
	
		//同步获取商品详情
		 
	},
	methods: {
		toDetail(e) {
			this.$emit('toDetail', e);
		},
		imageError(index) {
			if (this.value[index].goods_image) this.value[index].goods_image = this.$util.getDefaultImage().default_goods_img;
			else this.value[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		},
		// 获取商品详情
		async getGoodsSkuDetail(skuId) {
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open(this.currentRoute);
				return false;
			}
		
			let res = await this.$api.sendRequest({
				url: '/api/goodssku/detail',
				async: false,
				data: {
					sku_id: skuId,
				}
			});
			let data = res.data;
			if (data.goods_sku_detail != null) {
				// var tempInfo = data.goods_sku_detail
				this.goodsSkuDetail = data.goods_sku_detail;
				this.goodsSkuDetail.preview = this.preview;
		
				if (this.skuId == 0) this.skuId = this.goodsSkuDetail.sku_id;
		
				//媒体
				if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
				
				if(this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
				else this.goodsSkuDetail.sku_images = [];
				
				if(this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image){
					this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
					this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.concat(this.goodsSkuDetail.goods_image);
				}
		
				this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
		
				this.goodsSkuDetail.show_price = this.goodsSkuDetail.discount_price;
		
				// 当前商品SKU规格
				if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
		
				// 商品SKU格式
				if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
		
				this.contactData = {
					title: this.goodsSkuDetail.sku_name,
					path: '/pages/goods/detail/detail?sku_id=' + this.skuId,
					img: this.$util.img(this.goodsSkuDetail.sku_image, {
						size: 'big'
					})
				}
				this.$refs.goodSkuNew.show("join_cart", this.goodsSkuDetail, () => {
					this.getCartCount();
				});
			} else {
				this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
			}
		},
		refreshGoodsSkuDetail(goodsSkuDetail) {
			Object.assign(this.goodsSkuDetail, goodsSkuDetail);
		},
		//获取购物车数量
		getCartCount() {		
			this.$store.dispatch('getCartNumber').then((e) => {
				this.cartCount = e;
			})
		},
	},
	watch: {
		value() {
			for (var i = 0; i < this.value.length; i++) {
				if (this.value[i].goods_image) this.value[i].goods_image = this.value[i].goods_image.split(',')[0];
			}
		}
	}
};
</script>

<style lang="scss">
// 瀑布流
// .ns-goods-item-box {
// 	width: 100vw;
// 	display: flex;
// 	flex-wrap: wrap;
// 	padding: 20rpx;
// 	box-sizing: border-box;
// }

// .ns-goods-item {
// 	width: calc(50% - 10rpx);
// 	margin-right: 18rpx;
// 	margin-bottom: 20rpx;
// 	background: #ffffff;
// 	padding: 20rpx;
// 	box-sizing: border-box;
// 	border-radius: 10rpx;

// 等高
.ns-goods-item-box {
	width: 100vw;
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	box-sizing: border-box;
	&.no-padding{
		padding-bottom: 0;
	}
}

.ns-goods-item {
	width: calc(50% - 10rpx);
	// height: 550rpx;
	margin-right: 18rpx;
	margin-bottom: 20rpx;
	background: #ffffff;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 10rpx;

	// &:last-child{
	// 	margin-bottom: 0;
	// }
	
	.recommend-way {
		position: relative;
	}
	
	.recommend-icon {
		display: inline-block;
		width: 80rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		background-color: red;
		position: absolute;
		left: 0;
		z-index: 9;
		
		.recommend-icon-font {
			display: inline-block;
			color: #FFFFFF;
			font-size: 24rpx;
			vertical-align: top;
		}
	}
	
	.recommend-icon.recommend-way-one {
	}
	
	.recommend-icon.recommend-way-two {
		background-color: green;
	}
	
	.recommend-icon.recommend-way-three {
		background-color: orange;
	}

	.image-box {
		width: 306rpx;
		height: 306rpx;
		margin-bottom: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.good-name {
		width: 100%;
		height: 64rpx;

		.name-hidden-one {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: $ns-font-size-base;
			line-height: 1.4;
		}
	}
	.good-name1 {
		width: 100%;
		.name-hidden-two {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			font-size: $ns-font-size-base;
		}
	}

	.goods-sub-name {
		width: 100%;
		height: 54rpx;
		text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: $ns-font-size-x-sm;
			line-height: 1.4;
			color: #838383;
		}
	}

	.mail {
		width: 100%;
		height: 26rpx;
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		view {
			line-height: 1;
			border: 1px solid #fff;
			font-size: $ns-font-size-x-sm;
			padding: 2rpx 4rpx;
			border-radius: 4rpx;
			margin-right: 11rpx;
		}
	}

	.price-info {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 75rpx;
		margin-top: 10rpx;
		line-height: 1;
		text {
			line-height: 1;
		}
		.price-top {
			width: 100%;
			display: flex;
			align-items: flex-end;
			height: 50rpx;
			image {
				width: 56rpx;
				height: 22rpx;
				margin-left: 6rpx;
				display: block;
			}
			.unit {
				font-size: $ns-font-size-sm;
				color: #777;
			}
			.price {
				font-size: $ns-font-size-sm;
				color: #777;
			}
			.sale_num {
				font-size: $ns-font-size-x-sm;
			}
		}
		.price-bottom {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			height: 50rpx;
			image {
				width: 56rpx;
				height: 22rpx;
				margin-left: 6rpx;
				display: block;
			}
			.unit {
				font-size: $ns-font-size-sm;
			}
			.price {
				font-size: $ns-font-size-lg;
				// font-weight: 500;
			}
			.sale_num {
				font-size: $ns-font-size-x-sm;
			}
		}
		.line-through {
			text-decoration: line-through;
		}
		.bottom-left,
		.top-left {
			display: flex;
			align-items: center;
		}
		.add {
			font-size: 50rpx;
		}
	}
}

.fenxiaoMarket-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	.price {
		font-size: $ns-font-size-lg;
		line-height: 1;
	}
	.earn-price {
		line-height: 1;
		font-size: $ns-font-size-sm;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		text {
			font-size: $ns-font-size-sm;
			margin-right: 10rpx;
		}
	}
}

.topicList-price {
	padding-top: 27rpx;
	.item-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.buy-btn {
			padding: 10rpx 12rpx;
			text-align: center;
			color: #fff;
			font-size: $ns-font-size-x-sm;
			border-radius: 100rpx;
			line-height: 1;
		}
		.item-price {
			line-height: 1;
			font-size: $ns-font-size-lg;
		}
	}
	.item-through-price {
		font-size: $ns-font-size-sm;
		border-radius: 5rpx;
		text-decoration: line-through;
		color: #777777;
		line-height: 1;
	}
}

.ns-goods-item:nth-child(2n) {
	margin-right: 0;
}
// .ns-goods-item:nth-last-child(1) {
// 	margin-bottom: 0;
// }

// .ns-goods-item:nth-last-child(2) {
// 	margin-bottom: 0;
// }

/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	max-height: unset !important;
	overflow-y: unset !important;
}
</style>
